<template>
  <div class="Map">

    <el-container>
      <el-aside width="auto"><MapLeft @filterMapSuccess="getFilterMapSuccess"></MapLeft></el-aside>
      <el-main>
        <div class="TaskFlow">
          <el-row>
            <el-col :span="20">
              <div class="flex">
                <CreateTask
                  type="primary"
                  icon="el-icon-arrow-right el-icon--right"
                  label="创建任务计划"
                  style="margin-right:10px"
                  >区镇级管理员 / 创建任务计划</CreateTask
                >
                <el-button
                  @click.stop="execution"
                  type="primary"
                  icon="el-icon-share"
                  >任务执行 / 数据标注 / 村居采集 , 镇 / 街区支持录入<i
                    class="el-icon-arrow-right el-icon--right"
                  ></i
                ></el-button>
                <el-button @click.stop="audit"  type="primary" icon="el-icon-s-opportunity"
                  >任务数据查看 / 审核 / 镇街审核 / 区支持审核</el-button
                >
              </div>
            </el-col>
            <el-col :span="4" >
              <!-- <el-button type="danger" @click="CollectionStaff" icon="el-icon-s-check"
                >采集人员库</el-button
              > -->
              <el-alert title="当前处于数据查看模式" type="warning"   effect="dark"></el-alert>
            </el-col>
          </el-row>
        </div>
        <CreateMap :key="key" :random="random" :filterMapSuccessObj="filterMapSuccessObj">创建地图</CreateMap>
      </el-main>
    </el-container>

    <el-dialog title="采集人员库" :visible.sync="CollectionStaffShow" width="50%">
      <el-card>
        <el-table
      :data="CollectionStaffList"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CollectionStaffShow = false">取 消</el-button>
        <el-button type="primary" @click="CollectionStaffShow = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import CreateMap from './CreateMap/CreateMap'
  import {mapState} from 'vuex'
export default {
  name: "Map",
  data() {
    return {
      key:'1',
      executionShow: false,
      auditShow:false,
      CollectionStaffShow:false,
      CollectionStaffList:[],
      filterMapSuccessObj:{},
      random:0
    };
  },
  methods: {
    openCreateTask() {
 
    },
    execution() {
      this.$message({
        type:"success",
        showClose:true,
        duration:15000,
        message:"提示：请您[选中]在左侧[任务栏]中[采集中]的任务进入地图，筛选[图斑状态]为[未采集]的图斑进行数据标注即可。标注每个图斑后数据状态将变更为[已采集]。"
      })
    },
    audit(){
      this.$message({
        type:"warning",
        showClose:true,
        duration:15000,
        message:"提示：您可以在左侧[任务栏]中选择[查看/审核图斑数据]中进行[审核]或[批量审核]或者直接在GIS地图中点击图斑进行审核。"
      })
    },
    CollectionStaff(){
      this.CollectionStaffShow = true;
    },
    getFilterMapSuccess(res){
        this.filterMapSuccessObj = res
        this.random = Math.random()
    }
  },
  components: {
    CreateMap,
    MapLeft: () => import("./MapLeft/MapLeft"),
  },
  computed:mapState({
    taskObject:(state)=>{
      return state.taskmodel.taskObject
    }
  }),
  created() {
    
      let userInfo;
      if(localStorage.getItem('userInfo')){
        userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.key = userInfo.loginName
      }
      console.log(this.key)
      
  },
};
</script>

<style lang="scss">
.el-main {
  padding: 0;
  position: relative;

  .TaskFlow {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    padding: 15px 15px;
    border-bottom: 2px solid #ddd;
    .flex {
      display: flex;
      justify-content: flex-start;
    }
  }
  .el-button-group {
    min-width: 600px;
  }
}
</style>
